<template>
  <div class="main-box">
    <div class="table-box">
      <ProTable
        ref="proTable"
        :columns="columns"
        :request-api="GetGirdMapList"
        :init-param="initParam"
        :search-col="{ xs: 1, sm: 1, md: 2, lg: 3, xl: 3 }"
        @row-click="rowClick"
        :cell-class-name="tableColClassName"
        :key="1"
      >
        <!-- 表格 header 按钮 -->
        <!-- <template #tableHeader>
          <el-button type="primary" :icon="Download" plain @click="downloadFile">导出数据</el-button>
        </template> -->
      </ProTable>
    </div>
  </div>
</template>
<script setup lang="ts" name="runstatus">
import { ref, reactive } from "vue";
// import { ElMessageBox } from "element-plus";
// import { useDownload } from "@/hooks/useDownload";
import ProTable from "@/components/ProTable/index.vue";
import { ProTableInstance, ColumnProps } from "@/components/ProTable/interface";
// import { Download } from "@element-plus/icons-vue";
import { GetGirdMapList, GetGirdWgList } from "@/api/modules/girdMap";
import type { TableColumnCtx } from "element-plus";
import { useRouter } from "vue-router";

const router = useRouter();

// ProTable 实例
const proTable = ref<ProTableInstance>();

// 如果表格需要初始化请求参数，直接定义传给 ProTable(之后每次请求都会自动带上该参数，此参数更改之后也会一直带上，改变此参数会自动刷新表格数据)
const initParam = reactive({ departmentId: "1" });

// 表格配置项
const columns = reactive<ColumnProps<any>[]>([
  { prop: "区县", label: "区县", width: 140 },
  {
    prop: "网格",
    label: "网格",
    width: 140,
    enum: GetGirdWgList,
    search: { el: "select", props: { filterable: true } },
    fieldNames: { label: "label", value: "value" }
  },
  // { prop: "中国电信", label: "中国电信", width: 140 },
  // { prop: "中国联通", label: "中国联通", width: 140 },
  // { prop: "中国移动", label: "中国移动", width: 140 },
  // { prop: "总计", label: "总计", width: 140 },
  { prop: "移动占比", label: "移动占比", width: 140 },
  { prop: "移动占比30%以下的栅格比例", label: "移动占比30%以下的栅格比例" },
  { prop: "移动占比30-40%的栅格比例", label: "移动占比30-40%的栅格比例" },
  { prop: "移动占比40-50%的栅格比例", label: "移动占比40-50%的栅格比例" },
  { prop: "移动占比50-60%的栅格比例", label: "移动占比50-60%的栅格比例" },
  { prop: "移动占比60以上的栅格比例", label: "移动占比60以上的栅格比例" }
]);

// 单击行
const rowClick = (row: any, column: TableColumnCtx<any>) => {
  if (column.label === "网格") {
    router.push({ name: "girdImage", query: { name: row.网格 } });
  }
};

// 标注背景颜色
const tableColClassName = ({ column, row }: { column: any; columnIndex: number; row: any; rowIndex: number }) => {
  if (column.label === "网格") return "custom-table-td default-row";
  row;
};

// // 导出用户列表
// const downloadFile = async () => {
//   // ElMessageBox.confirm("确认导出用户数据?", "温馨提示", { type: "warning" }).then(() =>
//   //   useDownload(exportInfoApi, "数智员工运行情况", proTable.value?.searchParam)
//   // );
// };
</script>
